<template>
  <el-dialog
    :title="textMap[dialogStatus]"
    :visible.sync="dialogFormVisible"
    :before-close="handleClose"
  >
    <el-form
      ref="dataForm"
      :model="temp"
      :rules="rules"
      label-position="left"
      label-width="90px"
      style="width: 400px; margin-left:50px;"
    >
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="temp.name" />
      </el-form-item>
      <el-form-item label="国标设备id" prop="channel_id">
        <el-input v-model="temp.channel_id" />
      </el-form-item>
      <el-form-item label="拉流地址" prop="mrl">
        <el-input v-model="temp.mrl" />
      </el-form-item>
      <el-form-item label="媒体服务器" prop="server_id">
        <el-select v-model="temp.server_id" placeholder="请选择">
          <el-option
            v-for="item in mediaServers"
            :key="item.id"
            :label="item.server_id_zlk"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="in_use">
        <el-radio-group v-model="temp.in_use">
          <el-radio :label="1">在用</el-radio>
          <el-radio :label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否录像" prop="is_record">
        <el-switch v-model="temp.record" :active-value="1" :inactive-value="0" />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">
        取消
      </el-button>
      <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { add, update } from '@/api/proxy'
import { list as mediaList } from '@/api/mediaServer'

export default {
  name: 'PullDeviceEdit',
  props: {
    dialogStatus: {
      type: String,
      default: 'create'
    },
    show: {
      type: Boolean,
      default: false
    },
    camera: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      temp: {
        camera_id: undefined,
        channel_id: undefined,
        name: undefined,
        mrl: undefined,
        record: 1,
        in_use: 1,
        server_id: undefined
      },
      rules: {},
      textMap: {
        update: '修改拉流代理',
        create: '新增拉流代理'
      },
      mediaServers: [],
      dialogFormVisible: false
    }
  },
  watch: {
    camera(val) {
      this.temp = val
    },
    show(val) {
      this.dialogFormVisible = val
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true

      // 获取媒体服务器列表
      mediaList({ page: 1, pagesize: 10000 }).then(response => {
        this.mediaServers = response.data.servers
      }).finally(() => {
        this.listLoading = false
      })
    },
    createData() {
      const that = this
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          add(this.temp).then(response => {
            this.$message({
              message: '创建成功',
              type: 'success'
            })
            that.fetchData()
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error'
            })
          }).finally(() => {
            that.dialogFormVisible = false
            that.$emit('update:show', false)
          })
        }
      })
    },
    updateData() {
      const that = this
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          update(this.temp).then(response => {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            that.fetchData()
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error'
            })
          }).finally(() => {
            that.dialogFormVisible = false
            that.$emit('update:show', false)
          })
        }
      })
    },
    handleClose(done) {
      this.$emit('update:show', false)
      done()
    }
  }
}
</script>

<style scoped>

</style>
